<template>
  <div class="aside">
    <el-menu
      :default-active="currentRoute"
      class="el-menu-vertical-demo"
      :collapse="isShow"
      @open="handleOpen"
      @close="handleClose"
      router
    >
      <h3 class="title">菜单</h3>
      <template v-for="(route, index) in processedLayoutRoutes" :key="index">
        <!-- 递归渲染菜单项 -->
        <DynamicMenu :route="route" />
      </template>
    </el-menu>
  </div>
</template>


<script setup>
import { ref, reactive, computed, watch, onMounted, onUnmounted } from "vue";
import { storeToRefs } from "pinia";
import { useHomeStore } from "@/stores/home";
import { useRouter, useRoute } from "vue-router";
// import DynamicMenu from './DynamicMenu.vue'; // 递归菜单组件

const homeStore = useHomeStore();
const { isShow } = storeToRefs(homeStore);

const router = useRouter();
const route = useRoute();
const routes = router.getRoutes();
const layoutRoutes = routes.filter((route) => route.path.startsWith("/layout/"));
const currentRoute = ref(route.path);

const parentGroups = {};
layoutRoutes.forEach((item) => {
  if (item.meta && item.meta.parent) {
    const parentKey = item.meta.parent;
    if (!parentGroups[parentKey]) {
      parentGroups[parentKey] = {
        title: parentKey,
        children: [],
      };
    }
    parentGroups[parentKey].children.push(item);
  }
});
const groupedRoutes = Object.values(parentGroups);
const processedLayoutRoutes = [
  ...layoutRoutes.filter((item) => !item.meta?.parent),
  ...groupedRoutes,
];

const handleClose = (key) => {
  console.log(`关闭${key}`);
};
const handleOpen = (key) => {
  console.log(`打开${key}`);
};

onMounted(() => {});
onUnmounted(() => {});
</script>
